<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>抽奖记录</title>
    <script src="__STATIC__/js/jquery.min.js"></script>
    <script type="text/javascript" src="__STATIC__/js/lottery.js"></script>
</head>

<style type="text/css" media="screen">
	*{
		margin: 0;
		padding: 0;
	}
	.main{
		display: flex;
		flex-direction: column;
		width: 6.90rem;
		margin: auto;
	}
	.item{
		display: flex;
		flex-direction: row;
		height: 0.8rem;
		border-bottom: .01rem solid #eee;
		margin-top: 0.2rem;
		padding-bottom: 0.12rem;
	}
	.item .left{
		display: flex;
		flex-direction: column;
		width: 3.5rem;
	}
	.item .left .title{
		font-size: .3rem;
		color: #888;
		line-height: 0.5rem;
	}
	.item .left .time{
		font-size: .15rem;
		color: #ccc;
	}
	.item .right{
		text-align: right;
		line-height: .68rem;
		width: 3.4rem;
		font-size: 0.3rem;
		color: #545454;
	}
</style>

<body>

	<div class="main">
		<!-- <div class="item">
			<div class="left">
				<p class="title">抽奖记录</p>
				<p class="time">2017-05-09</p>
			</div>
			<div class="right">20积分</div>
		</div> -->
	</div>

</body>
<script type="text/javascript">
	var load = {
		page: 1,
		nomore: false,
		is_loading: false,
		init:function(){
			this.getData();
			var _this = this;
			_this.scrollTop = $(window).scrollTop();
		    $(window).scroll(function() {
		        var scrollTop = $(window).scrollTop();
		        if (_this.scrollTop<scrollTop) {
		        	console.log('向下滚动')
		        	// 向下滚动
		            var viewH =$("body").height(),//可见高度
			        contentH =$("body").get(0).scrollHeight;//内容高度 
			        if(contentH - viewH - scrollTop <= 100) {  
			        	_this.getData();
			        }

		        }; 
		         _this.scrollTop = scrollTop;
		    });	
		},
		buildHtml:function(data){
			var html = '';
			for (var i = 0; i <  data.length; i++) {
				var d = data[i];
				html +='<div class="item">\
						<div class="left">\
							<p class="title">抽奖记录</p>\
							<p class="time">'+this.formatTime(d.create_time)+'</p>\
						</div>\
						<div class="right">'+d.prize_name+'</div>\
					</div>';
			}
			$(".main").append(html);
		},
		formatTime:function (timestamp) {
			 var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
	        var Y = date.getFullYear() + '-';
	        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
	        var D = date.getDate() < 10 ? '0'+date.getDate()+" " : date.getDate() + ' ';
	        var h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
	        var m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
	        var s = date.getSeconds() < 10 ? '0' + date.getMinutes() : date.getSeconds() ;
	        return Y+M+D+h+m+s;
		},
		getData:function(){
			var _this = this;
			if(_this.nomore || _this.is_loading) return;
			_this.is_loading = true;
			$.ajax({
	    		url: "{:U('lottery/lottery_record')}",
	    		type: "post",
	    		data:{
	    			p: _this.page
	    		},
	    		dataType:"json",
	    		success: function(res)
	    		{
	    			if(!res || !res.data || !res.data.list || res.data.list.length < 1 )
	    			{
	    				_this.nomore = true;
	    				return false;
	    			}

	    			if( res.data.list.length < 10 )
	    			{
	    				_this.nomore = true;
	    			}
	    			_this.buildHtml(res.data.list);

	    		},
	    		complete:function()
	    		{
	    			 _this.page++;
	    			_this.is_loading = false;
	    		}
			})
		}
	}

	load.init();
	
</script>
</html>